<template>
  <div id="wrap">
    <h1>setup语法堂</h1>
    <p>{{ str }}</p>
    <p>{{ str2 }}</p>
    <button @click="changestr">修改str</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ComponentName',
}
</script>

<script lang="ts" setup>
// import { ref } from "vue";
let str='我是组合式api的普通变量'
// let str2=ref<string>('我是组合式api的响应式变量')
const changestr=()=>{
    str='我是组合式api的普通变量，不能响应式显示UI刷新，修改我没用'
    console.log(str);
    str2.value='我是组合式api的响应式变量，能够响应式显示UI刷新,可以修改我'
}
</script>

<style scoped lang="scss">
</style>
